<template>
  <div class="duihuan">
    <div class="exchange">
      <input type="text"
             placeholder="请输入兑换码">
    </div>
    <div class="exchange_con">
      <input type="text"
             placeholder="验证码">
      <div class="slden"
           @click="refreshCode">
        <Sldentify :identifyCode="identifyCode"></Sldentify>
      </div>
    </div>
    <div class="determine">兑换</div>
  </div>
</template>

<script>
import Sldentify from '@/components/Sldentify.vue';
export default {
  name: 'DuiHuan',
  data: function () {
    return {
      identifyCode: "",
      identifyCodes: "0123456789abcdwerwshdjeJKDHRJHKOOPLMKQ",//随便打的
      code: "",
    }
  },
  components: {
    Sldentify,
  },
  mounted () {
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
  },
  methods: {
    refreshCode () {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    randomNum (min, max) {
      max = max + 1
      return Math.floor(Math.random() * (max - min) + min)
    },
    // 随机生成验证码字符串
    makeCode (data, len) {
      for (let i = 0; i < len; i++) {
        this.identifyCode += data[this.randomNum(0, data.length - 1)]
      }
    },
  },
}
</script>

<style lang="less">
body {
  background-color: #f5f5f5;
}
.duihuan {
  padding: 15px;
  .exchange {
    input {
      width: 100%;
      font-size: 16px;
      padding: 15px;
      box-sizing: border-box;
      border: none;
      border-radius: 5px;
      margin-bottom: 20px;
    }
  }
  .exchange_con {
    display: flex;
    margin-bottom: 10px;

    input {
      width: 55%;
      font-size: 16px;
      padding: 8px;
      box-sizing: border-box;
      border: none;
      border-radius: 5px;
      margin-bottom: 10px;
    }
    .slden {
      width: 30%;
    }
  }
  .determine {
    background-color: #ccc;
    color: #fff;
    text-align: center;
    font-size: 16px;
    margin: 16px 16px 0;
    line-height: 42px;
    border-radius: 5px;
  }
}
</style>